<template>
  <!-- 表单 -->
  <a-form
    ref="formRef"
    :columns="columns"
    label-align="right"
    :model="formState"
    :labelCol="{ span: 5 }"
    @finish="onFinish"
  >
    <a-row :gutter="24">
      <a-col :span="8">
        <a-form-item :name="'id'" :label="'派件任务编号'">
          <a-input allow-clear v-model:value="formState.id" placeholder="请输入派件任务编号" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'orderId'" :label="'订单编号'">
          <a-input allow-clear v-model:value="formState.orderId" placeholder="请输入订单编号" />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'agencyName'" :label="'所属营业部'">
          <a-tree-select
            v-model:value="formState.agencyName"
            :tree-data="treeData"
            placeholder="请选择所属营业部"
            show-search
            allow-clear
            tree-node-filter-prop="label"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'signStatus'" :label="'签收状态'">
          <a-select v-model:value="formState.signStatus" allow-clear placeholder="请选择">
            <a-select-option
              v-for="item in qianshouStatus"
              :key="item.value"
              :value="item.id"
              :label="item.name"
            >
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'estimatedEndTime'" :label="'预计完成时间'">
          <a-range-picker
            v-model:value="formState.estimatedEndTime"
            allow-clear
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'actualEndTime'" :label="'实际完成时间'">
          <a-range-picker
            v-model:value="formState.actualEndTime"
            allow-clear
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
      </a-col>
      <a-col :span="8">
        <a-form-item :name="'assignedStatus'" :label="'任务分配状态'">
          <a-select v-model:value="formState.assignedStatus" allow-clear placeholder="请选择">
            <a-select-option v-for="item in carStatus" :key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-col>



          <a-row justify="center" style="margin-bottom: 22px;margin-left: 22px">
      <a-space>
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button @click="onReset">重置</a-button>
      </a-space>
    </a-row>
    </a-row>

  </a-form>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { getBusinessHallTreeAPI } from '@/services/businessHall'
const emit = defineEmits(['init', 'shouji', 'reset', 'update:page', 'update:pageSize'])
defineProps({
  /** 页码 */
  page: {
    type: Number,
    default: 1,
  },
  /** 页容量 */
  pageSize: {
    type: Number,
    default: 10,
  },
})

// 点击搜索按钮
const onFinish = async () => {
  // 重置页码
  emit('update:page', 1)
  // 重新获取数据
  emit('shouji', formState)
}
// 表单初始化
onMounted(() => {
  emit('init', formState)
})

// 重置表单
const onReset = async () => {
  // 重置页码和页容量
  emit('update:page', 1)
  emit('update:pageSize', 10)
  // 重置表单后，重新获取数据
  await formRef.value.resetFields()
  emit('reset', formState)
  emit('shouji', formState)
}
const formRef = ref()

const formState = reactive({
  /** 派件任务编号 */
  id: undefined,
  /** 订单编号 */
  orderId: undefined,
  /** 签收状态 */
  signStatus: undefined,
  /** 所属营业部 */
  agencyName: undefined,
  /** 预计完成时间 */
  estimatedEndTime: undefined,
  /** 实际完成时间 */
  actualEndTime: undefined,
  /** 任务分配状态 */
  assignedStatus: undefined,
  /** 页码 */
  page: 1,
  /** 页面大小 */
  pageSize: 10,
})

// 下拉框
const carStatus = [
  { id: 2, name: '已分配' },
  { id: 3, name: '待人工分配' },
]
const qianshouStatus = [
  { id: 0, name: '未签收' },
  { id: 1, name: '已签收' },
  { id: 2, name: '拒收' },
]
// 树形机构信息
const treeData = ref([])
const getTreeData = async () => {
  const res = await getBusinessHallTreeAPI()

  // 递归写法处理成组件所需的树形结构
  function mapChildren({ name, id, children }) {
    const item = { label: name, value: id }
    if (children) {
      item.children = children.map(mapChildren)
    }
    return item
  }
  // 保存树形结构数据用于组件展示
  treeData.value = JSON.parse(res.data).map(mapChildren)
}

onMounted(() => {
  getTreeData()
})
</script>